Lesson 15: How to Create a Flat Design Character with Shading 


Creating characters in Designer is fun and simple once you get a hang of all 
the different actions needed to perform this action. We like creating new 
faces, people, and animals because they are the main characters in the stories 
we like to create. In this lesson, we'll walk you through how to make a 
character's face with some shading around his face and hair. We hope you 
like this lesson. 


Ready to begin? 
Create a New Document to these specifics: 


e Web - CD Digital Release 
e Transparent background (unchecked) 


Click on the Rounded Rectangle Tool so it's activated. This shape will be 
the man's head. 


Click & drag out a vertically shaped rectangle (see the image below for 
reference). 


Click on the red node (see black square) and drag it inwards to give the 
corner a more rounded appearance. 


Drag the red node almost all the way into the shape (see this image) to 
maximize its curvature. 


Go to the Colors Panel & click on the Stroke doughnut (see the partial 
yellow square in the below image). It is located behind the solid white Fill 
color circle. When it is in front, we are going to make our shape have no 
stroke color. We'll do this in the next step... 


Click on the no color icon (see the small yellow square in the image below) 
which will change the black donut's color to a white with a line going thru it. 
This is the symbol for no stroke color (or no Fill color if it is on the Fill circle 
- see white circle in the image above). 


This is what the Colors Panel should look like now that we've chosen our 
Stroke to have no color (see above image). 


Click on the Fill circle so it's in the front position. 


This process seems pretty time consuming, but once you understand it, it's 
quite a fast process to do. Now, we're set for coloring the shape in our 
document. This will be the character's face, so we'll do a Google search for 
"RGB Hex code for a face". This is the code we found: FFDBAC. 


Hint: When looking for specific RGB Hex codes online, there are tons to 
choose from. You need to have an idea of what color you're looking for and 
use that Hex code. Please use our code for this lesson and then come back 
and change the color if you want. 


The shape should still have the blue nodes surrounding it, which means its 
layer is also highlighted in blue and active. If this is not so, ... 


Click on the Rounded Rectangle layer to activate it. This will cause the 
blue nodes to surround the shape. 


Go to the Color Panel and click on its burger menu icon (see the yellow 
square) to reveal a pop-out window where we can choose different coloring 
options. We've done this now at least four times so far. This should be also 
second nature to you by now. 


Click on Sliders. 


Color 


V Wheel 


Boxes 
Tint 


Click on the pop-out menu where you can choose which type of Sliders you 
want to use and click on RGB Hex (we've done this several times already). 


Type FFDBAC in the RGB Hex value box and press Return. This will 
change the color of the face to the color we chose from the internet. 


This is what our head looks like now: 


Now, we'll work on the hair. 
Click on the Ellipse Tool (or Circle) so it's activated. 


Hold-down the Shift key as you click & drag a perfect circle inside our 
document. We've placed our circle over the top portion of the face. This is 
because after we change its color, we'll move this circle behind the face shape 
to make it look like the character's hair. 


Click on the Move Tool and try to reposition the Ellipse where we've 
positioned ours (see the below image). 


Note: Make sure you zoom into your document as you are working on this 
lesson. Many of the shapes we'll create can be quite small. 


For this lesson, we'll give our character blue hair (you are totally free to use 
any color you want). 


Go to the RGB Hex value box and type 0001E8. This is the blue color we 
are using. 


Go to the Toolbar and click on the Move to Back icon (see yellow 
rectangle below). This will cause the now blue circle to be placed behind the 
character's head. 


The hair on the back of the character 's head is done. If we want to, we can 
click on its shape or its layer to change its position to any place we want it. 
But we'll leave it alone for now. It looks great. 


Now, we're going to create four smaller circles that will compromise the 
character 's bangs. You have to think creatively here :). 


Click on the top layer so it's active before you do the next step. 


Note: At any time when you are creating these new objects and they are 
behind the other shapes, simply go to the Layers Panel and move their layer 
to the top of the Layers Stack. This will reposition the new shape where you 
want it. Feel free to practice using the four layer positioning buttons, too (see 
the above image). 


Click again on the Ellipse Tool and click & drag out a blue circle shape on 
top of the character 's ‘face’ near the existing hair (see our image below). You 
will have to zoom into the document to do this well. This new circle's shape 
should be about a quarter the height of the face (or less). 


Next, we'll use a shortcut for duplicating shapes that are similar. To do this, 
all we have to do is first hold-down the Alt key or the Ctrl/Cmd key and 
then use a click & drag motion on top of the shape we want to duplicate. As 
we perform this action, we can simply drag out another duplicated shape - in 
this case we'll be duplicating the first blue circle that is in front of the person's 
skin. We'll also be resizing these new circles. 


Note: Remember that before you duplicate an object (or shape) make sure the 
source shape is selected and its layer is highlighted in the Layers Panel. Also 
vital is that the Move Tool needs to be selected before you perform this 
operation. 


Ready to try this new action? 
Click on the Move Tool so it's active (or use its shortcut of V). 


Hold-down the Alt or Ctrl/Cmd key and then click on the first round 
‘bang’ and without releasing the mouse button, drag the new shape to the 
right of the first. 


Repeat three times. Each time use the Move Tool and resize the three new 
shapes. This is what we did. The first new circle is centered on the head and 
is about 30% bigger. The next shape to the right is bigger than the first circle, 
but smaller than the big middle circle. The fourth circle is the smallest and is 


positioned to the far right of the head. 


It is probably easiest to just look at the below screenshot and then make your 
shapes approximately the same as we have ours. We selected the four new 
shape layers in the Layers Panel so you can see how each looks in the 
document. 
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We're done with the hair and now we'll create the face. We'll start with the 
eyes. 


To make an eye, we’re going to again use the Ellipse Tool. 


Click & drag to make a vertically oblong circle on the left-side of the man's 
face. It doesn't matter where on his face because we'll be moving it shortly. 


Note: If creating a shape to precise measurements is important for you, you 
can go to the Transform panel located in the very bottom right area of the 
screen and type the W: and H: dimensions of this oblong 'eye' shape. See this 
screenshot for the dimensions we're using. We marked the area with a yellow 
rectangle. 


Transform 


mem X: 1253 px W: 75 px 


Y: 598 px H: 150 px 


It isn't necessary to be so exact when making this face, but we thought it's a 
skill you should be familiar with. Now, we'll change the color of the eye. 


Go to the left side of the Contextual Toolbar & click on the Fill square (see 
the yellow rectangle in the below image). 


Move the inner node of the Color Wheel straight down so the color of the 
oblong circle turns black (we added a white arrow to show you this action 
you need to do). 
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This is what your oblong "eye" should look like now. The reason we placed it 
on the skin area is to provide contrast for our next step when we duplicate 
this shape and turn it white. If this black shape was on the white document, it 
would make it near impossible to see the white shape it'll be tuned into. 


Hint: Look at the Color Panel in the top right corner of the screen. Pay 
attention to the RGB Hex code for black (#000000). It is all zeros because in 
the RGB color space when there is a total absence of light (red, green, blue) 
you get black (see yellow rectangle for this code). 
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Also look at the color values for each of the R, G, B sliders. Each is 00. Click 


on one of the sliders and move it all the way to the right - the resulting code 
is FF (for full color vibrancy of that color). We covered these RGB Hex 
codes in the extra Color Theory chapter, but we still like having fun with 
these color options. 


RGB Hex Review: What colors do these codes represent? FF0000, OOFFOO, 
OOOOFF. Check the last page of the Color Theory chapter for the answers you 
should have already worked through. 


Ready to continue with the lesson? 
Go to the Layers Panel and click on the top layer so it's highlighted in blue. 
Press Ctrl/Cmd-+J to duplicate this layer. 
Go to the Transform panel and change this shape's dimensions as you can 


see in the below image. 


Transform 


X: 1253 px W: 50 px 


Y: 598 px H: 100 px 


Since the Sliders are still open in the Color Panel, we're going to input the 
RGB Hex code for white. Do you know this code? It's FFFFFF. This is 
because white light is a combination of all light and FF is the highest 
vibrancy of Red, Green, Blue. 


Go to the RGB Hex value box and type FFFFFF. This will cause our new 
shape to turn white. 


Click on the Move Tool and reposition the white pupil shape to where we 
have ours (see the below image). 


The white part of the eye shouldn't be extending outside the black part. To 
make the white part be inside of the black part, we'll use the same technique 
we used in Lesson 13 when we placed the mountain image inside the text. Do 
you remember what kind of layer we need to create to do this operation? 


Answer: We need to create a child layer. 


Go to the Layers Panel and click & drag the top white Ellipse layer 
below-and-to-the-right of the black Ellipse layer (see the yellow arrow in the 
below image for this action). 
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When we do this, the white shape will be inside the black shape. These two 
layers (adult & child) will appear in the Layers Panel just like grouped layers, 
but the effect inside the document will be obvious. 


This is what our two shapes look like now that the white ellipse layer is now 
a child layer to the black Ellipse layer. 


Now that we have our first eye complete, let's create the second eye and 
reposition both, so they'll create the character 's two eyes. 


Double-click on the canvas to activate the Move Tool (or press V). 


Note: Make sure Snapping is activated. It is the red horseshoe-looking 
magnet on the right side of the Toolbar. Click on it so its button is depressed 
(see this image). 


Click & drag the eye to the center of the face. Because Snapping has been 
enabled, we'll see a vertical line appear showing us that we are dead center. 


Press Ctrl/Cmd+ J to duplicate the eye. 


Note: When we duplicate shapes (or objects) inside our document, they will 
appear directly over the object we just duplicated. For new users this can be 
confusing. We only see the duplicated copy when we move it away from its 
source shape. In the Layers Panel, the duplicated copy is located above the 
source layer. 


In this next step, we're going to position the eyes as perfectly as we can by 
using the Transform Panel located in the lower right-hand corner of the 
screen under the Layers Panel. This panel allows us to make exact 
placements of the shapes in our documents. 


The Transform panel has these different values: 


e X & Y axis (horizontal & vertical) 
e Width & Height 
e Rotation & Shear 


This is what our Transform panel looks like now before we add or subtract 
any numbers to it. The only value box we are interested in is the X number 
(or 1405.5 px). Before we continue, we want to explain what we're about to 
do... 
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We're going to reposition both eyes by 125 px. To do this, we'll click inside 
the X value box so the px is highlighted in blue. Then, for the top layer, we'll 
type +125 and press Return. For the second layer, we'll repeat this step, but 
type -125. This will create a 250-pixel separation between our two eyes. 


So, let's do this. 


Click on the top layer so it's highlighted in blue (maybe it already is, but 
this is a good thing to check). 


Double-click in the X value box (specifically on the px because we'll be 
replacing this) and type +125 (see our image for exactly what you want to see 
before you press Return). 
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Press Return to cause this X-axis change. 


Now that the top eye has been moved to the right by 125 pixels, let's now 
move the other eye to the left by 125 pixels. 


Click on the next eye layer (not the top one) in the Layers Panel so it's 
highlighted in blue. 


Note: Notice how the selected layer has its grouped layers open and the top 
grouped layer does not. Pay special attention to the group icon on both layers: 
Look at how the two icons are different. The open group icon's triangle is 
facing downwards. Small thing to notice, but we love these details. 


Layers 


Opacity: 100 % vy Normal 


Double-click in the X value box (specifically on the px because we'll be 


replacing this) and type -125 (see our image for exactly what you want to see 
before you press Return). 
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Press Return to cause this X-axis change. 


The next part of the man's face we are going to create is his nose. Because the 
nose is the same basic shape as the man's head, we'll just duplicate the head 
and resize it to fit the nose. 


Click on the Rounded Rectangle layer in the Layers Panel so it's 
highlighted in blue. 


Press Crtl/Cmd+J to duplicate it. 


Go to the Contextual Toolbar and click on the Fill rectangle (see white 
rectangle in the image below). 


Note: If your Tools panel has two columns, like our does, then instead of 
using the Fill rectangle in the Contextual Toolbar, you can double-click on 
the Fill color in the Tools panel. Having one, two or more columns for the 
Tools is strictly a personal choice. But, for our workflow, we love it. 


Move the inner node upwards towards the black comer to make the skin 
color a darker shade (see yellow arrow for the position we moved ours to). If 
you want precision in color, the RGB Hex code for our nose is #E7C8A0. 
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Click & drag one of its blue nodes to resize it. Before you do this step, the 
'nose' will be the size of the character 's face. 


Click & drag it to the center of the character 's face between the nose (see 
our image for reference). 
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Next is the character 's mouth. To create this, we'll be using the Subtract 
Boolean Tool. The Boolean tools are great tools if you know how to use 


them. Don't feel bad if they seem awkward to you, it took us a long time to 
get comfortable using them. The most important part of using the Boolean 
Tools is that you need at least two shapes to interact with one another. So, for 
the character 's mouth, we'll be using and an Ellipse and Rectangle Tool. 


Ready? 
Click on the Ellipse Tool so it's activated. 
Click & drag out a circle in the skin area beneath the character 's nose. 
Click on the Rectangle Tool so it's activated. 


Click & drag out a Rectangle so it's covering the top third of the circle (see 
this image for how you should create your shapes). 


Click & drag the top white rotation node and rotate the Rectangle shape 
just bit to the right (see our image below). When you hover the cursor over 
the top white rotational node, you'll see a double-headed curved arrow appear 
(not seen). You can see that we rotated our -15.0°. If you hold-down the Shift 
key when you do your rotation, it'll turn in 15° intervals. 


Go to the Layers Panel and while holding-down the Shift key click on the 
top two layers so both are highlighted in blue (see this image). 
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Go to the right side of the Toolbar and click on the Subtract Boolean Tool 
(see yellow rectangle in the below image). The minus sign shows you this is 
the Subtract Tool. 


This is the resulting effect after the Rectangle shape has been subtracted from 
the portion of the Circle shape it was covering. 


Now, we want to change the color to black. Before we do this, we wanted to 
show you on the screen the four different items you can click on to change its 
color to black. We had to shrink the screen in order to make this image work. 


Go to the Layers Panel and click on the top (Curve) layer so it's 
highlighted in blue (this layer must be selected/active, and blue before you do 
the next step). 


Click on the black Color Picker Circle (see top right-most yellow square in 
the below image). This will turn our mouth black. 


There are three other ways we could've also changed the mouth's color black: 


1. Fill Rectangle (in the Contextual Toolbar) 

2. Fill Circle (Colors Panel) 

3. Color Picker Circle (the one we chose because it's already black). 
4. Fill Circle (bottom of Tools) 


Note: Had you chosen to recolor the selected layer with the other three 
options (1, 2, 4), then you'd use the Color Wheel (or Sliders) to select black. 
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Let's now resize the mouth and add a tongue... 


Double-click on the canvas to activate the Move Tool (or press the shortcut 
V). 


Click on the blue nodes to resize the mouth. 


Click & drag the mouth to its best position under the nose and centered on 
the face (see the below image to see what we've done). You can see that we 
made our mouth a bit bigger and have centered it on the character's face (see 
the vertical guideline going up the nose shape). 


Next, we'll put a tongue inside the mouth. We'll do this by creating first a 
circle and then making this circle a child layer to the mouth layer - thus 
placing the tongue shape inside the other shape. To continue with our practice 
of making precise colors, we'll give you the color to use for the tongue in the 
next few steps. 


Click on the Ellipse Tool so it's activated. 


Click & drag a circle underneath the mouth - do not hold-down the Shift 
key. We want this tongue circle to be more long horizontally than vertically 
(see three images before for reference). 


Go to the Sliders color panel and set the Color Format to RGB Hex. 


Type F26B8A in the RGB Hex code value box. 
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Just as we did with the eyes, we’re going to make the tongue a child layer of 
the mouth so it will only be visible where the mouth is. 


Go to the Layers Panel and click & drag the top Ellipse layer below-and- 
to-the-right of the Mouth layer (see the yellow arrow for this action). 
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Click on either outside blue node surrounding the tongue shape inside the 
mouth & drag it sideways, so the tongue shape is less round and more 
sideways oval (see our image). We moved our tongue a bit to the right off 
center, too. 


Now, let's create some ears. These are simple. All we're going to do is create 
a an Oval shape using the Ellipse Tool. Then, we'll duplicate it and make its 
copy half its size. Then, we'll place this smaller size inside the larger oval and 
color it the same color as the nose. 


Ready? 


Click once on the canvas so none of the Layers are selected and highlighted 
in blue. This will make it so any new layers we create (like what we're about 
to do) will be positioned at the top of the Layers Panel. If the tongue layer is 
still active when we create the ear shape, the new shape (and its layer) will 
not be at the top but only above the tongue layer. 


Click on the Ellipse Tool so it's activated - if it isn't already. 


Click & drag an oval on the left side of the character 's face (our left) about 
the same height as the eyes. 


Go to the Colors Panel and double-click inside the RGB Hex code value 
box and type FFDBAC (this is the skin color we used at the beginning). 


Note: It is not necessary that the RGB Hex code is all CAPS. You can have 
CAPS, lowercase, or a mixture of the two. We are just writing the code in 
CAPS so it's easier to see. 


Reposition the ear shape so its right side is on top of the left side of the 
character's face. We added a black arrow just to show you that the ear shape 
has been moved over a bit. 


Press Ctrl/Cmd+J to duplicate the ear shape. Remember, when you 
duplicate a shape, you will not see its double until it's moved. 


Click on the left middle blue node to shrink the duplicated shape inwards 
towards the face (see our image for reference). The black arrow represents 
the movement of the left middle node and its new position. 


Now, we want to make this new ear shape the same color as the nose. To do 
this, we'll use the Color Picker Tool. To use this tool, these are the steps... 


Go to the Colors Panel and find the Color Picker Tool (it looks like a 
small water dropper, and it's located to the right of the Fill circle). We've 
placed a yellow square around it. 
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Click (and do not release the mouse button) on the Color Picker Tool & 
drag its unique zoom-like cursor over the nose shape and release the mouse 
button. This will cause the Color Picker circle to turn this color. 
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Click one time on the Color Picker circle and the color of our selected 
object will change to that color. 


Next, we need to place the darker oval shape inside the other ear shape. Do 
you remember how to do this? If you thought "below-and-to-the-right" you're 
correct. 


Click on the top layer (the inside ear shape we just recolored) so it's 
highlighted in blue. 


Drag it below-and-to-the-right of the second layer (the main ear shape) in 
the Layers Panel (see the yellow arrow for this action). 
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Click on the top layer of the Layers Panel & press Ctrl/Cmd + J. 


Double-click on the canvas area (not on the document) to activate the 
Move Tool (or press V). 


Click & drag the duplicated ear to the right side of the character 's face 
(our right). 


Go to the Toolbar and click on the Flip Horizontal button (see yellow 
rectangle). Now both ears look the same. 


Reposition the right ear so it's partway on the character's face - like we did 
for the left ear. 


Now that both ears are done, perhaps they will look better if they were 
positioned behind the character's face. 


Go to the Layers Panel and hold-down the Shift key and press the top and 
second layer so both two top layers are selected and highlighted in blue. 
These are the two ear shape grouped layers. Do you remember what the icon 
looks like that signifies if a layer is a grouped layer or not? Check out these 
two selected layers and see if you can find out. Hopefully you already know 
the answer. 
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Click & drag these two layers beneath the head shape layer at the bottom of 
the Layers Stack. Notice we did not write below-and-to-the-right. We are not 
making child layers. 
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The ears look much better behind the face. What do you think? 


The character is looking pretty good. All we have left to do now is add some 
shading to his face and hair. 


Before we do that, let's tidy up our Layers Panel by grouping like layers and 
then renaming them. We'll start at the top and work our way down. 


Renaming layers is simple: All you have to do is double-click on a layer and 
then type its new name and press the Return key. The trick is to first group 
the layers and then rename the group. Maybe for some reason your Layers 
Stack is different from ours, so we'll go through each group together and 
rename them together, too. We'll list them by type. 


Hair (‘bangs’): 


Hold-down the Shift key and click on the top blue Ellipse layer and then 
the lowest in the group of four 'bangs' (not the very bottom layer). 


Right-click the mouse button and select Group from the pop-out window 
(see the below image). Notice how the four blue 'bangs' layers are highlighted 
in blue. 
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Group the layers according to type and then rename them as such. 


Note: We sometimes run into a very frustrating thing when we rename our 
layers. For some reason, sometimes after we type one letter the software 
won't allow us to continue renaming that layer. Sometimes, we have to 
double-click that same layer multiple times in order to rename it. If this 
happens to you, don't get too frustrated and just keep double-clicking and try 
to rename the layer. Eventually, you'll be able to. 


Here is what our Layers Panel looks like after we've grouped & renamed our 
layers. It looks MUCH cleaner. What do you think? Which do you prefer? 
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Now that our face is done and the layers have been tidied up, let's add some 
shadows to the character's face. This process is not too difficult once you 
understand how it's done. 


Ready? 


Click on the Head group and then click on the big Rounded Rectangle 
layer so it's highlighted in blue. 


Press Ctrl/Cmd+J to duplicate it. This is what the Head group should now 
look like. Notice how the duplicated layer is on top of the layer we just 
selected. New layers show up on top of the previous layer. 


Hold-down the Shift key and press the downward & left arrow keys once 
each. This will cause the duplicated face to shift down-and-to-the-left one 
space. 


Go to the Colors Panel and click on its Burger menu icon and select 
Wheel. We need the Color Wheel to do the next step. 


Move the inner node up about 1-2 mm (see black arrow for this action). 
This will slightly darken the duplicated layer. 


Go to the Layers Panel and move the duplicated layer under the head 
layer. This will cause the darkened face layer to be beneath the source face. 


Note: We're not creating a Child layer here: Only moving layers. 
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This is how we create the shadows for the character's face. Now, we'll use 
this same technique for the four different Ellipses that compromise the 
character's bangs (not the hair on the back of his head). We'll show you how 
to do one and you're on your own to do the rest. 


Ready to begin? 


Click on the group icon for the Head layer so its contents will collapse and 
make our Layers Stack look nicer. 


Click on the group icon for the Hair: Bangs layer so its contents reveal 
themselves. 


Click on the top Ellipse layer so it's active and highlighted in blue (see this 
image). 
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Press Ctrl/Cmd+J to duplicate it. 


Go to the Colors Panel & move the inner node all the way down to black 
This will make this duplicated hair turn black. 
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Click & drag the now black duplicated layer below its source layer. This is 
what these layers will look like after you've done this action. 


v oN Hair: Bangs 


| (Elipse) 


Hold-down the Shift key and press the downward & left arrows one time. 
This is what this 'bang' now looks like. Pretty cool, huh? 


Your turn. Repeat these steps for the other three 'bangs'. Make sure you have 
the correct layer selected every time you start this process. Here are the steps 
you need to take: 


1. Duplicate the 'bang' layer. 

2. Go to the Color Panel and move the inner node straight down to 
black. 

3. Move the duplicated layer underneath the one layer it was just on 
top of. 

4. Hold-down the Shift key and press the downward arrow and the 
left arrow one-time each. 


Done. You now know how to create a character's face in Designer and how to 
add shading to it. 


Finished. This ends this tutorial. 


Lesson 16: How to Create a Landscape Design 


This lesson was our favorite new technique to learn. We remembered 
watching countless videos about how to create this design without ever 
learning the steps. After learning how to create this effect, the process 
became self-evident. Problem is, is that there's a ton of videos showing how 
it's done but missing the critical explanations of why and how. We hope you 
like this effect as much as we do. 


Before we start, we think it's important to think about what we're about to do. 
If you're new to this effect, then do a casual glance at these steps and get on 
with the lesson. After you've had some experience working through this 
lesson, come back to this page, and re-read these steps. Maybe they're 
helpful. 


Landscape designs have these three basic characteristics: 


1. They're made up of lines that represent land curvatures (hills, 
mountains). 

2. They're made up of Monochromatic colors starting with the darkest 
and fading away to the lightest. 

3. They have shadows or lit spaces based on the position of the sun. 


Quick overview of the steps involved (Steps 6 & 7 will not be covered in this 
lesson): 


1. Use the Pencil Tool and draw the contours you want. 
2. Count how many main colors you'll need (e.g. three mountains + 
sky = 4). 

3. Choose a color (like Red) and write down the Monochromatic 
color codes for each one (RGB Hex codes or CMYK values). 

. Click on each contour and color it. 

. Position the layers correctly in the Layers Panel. 

. Add gradients to create more depth. 

. Import shapes like trees & silhouettes of shapes to be more 
creative. 


you ARA 


Ready to start creating? 


